// 店铺销量排行榜
<template>
    <div class="gradient-content full-width">
        <div :id="idName"></div>
    </div>
</template>

<script>
import { Chart } from '@antv/g2'
export default {
    props: {
        idName: {
            type: String,
            default: 'spu_info',
        },
        chartData: {
            type: Array,
            default: () => [],
        },
    },
    watch: {
        chartData: {
            handler(val) {
                if (val.length > 0) {
                    this.$nextTick(() => {
                        // if (this.height == 0) {
                        //     const boxContElement = document.querySelector(`.gradient-content`)
                        //     this.height = boxContElement.clientHeight
                        // }

                        this.render()
                    })
                }
            },
            immediate: true,
            deep: true,
        },
    },
    data() {
        return {
            chart: null,
            height: this.clientHeight,
        }
    },
    mounted() {
        // this.$nextTick(() => {
        //     const boxContElement = document.querySelector(`.gradient-content.store`)
        //     this.height = boxContElement.clientHeight
        //     // this.render()
        // })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.destroy()
    },
    methods: {
        render() {
            let data = []
            this.chartData.forEach(item => {
                const items = [
                    { spu: item.spu, quantity: item.all_inventory_quantity, type: 'all_inventory_quantity', name: '总库存数量' },
                    { spu: item.spu, quantity: item.not_send_quantity, type: 'not_send_quantity', name: '未发数量' },
                ]
                data = data.concat(items)
            })
            // Step 1: 创建 Chart 对象
            this.chart = new Chart({
                container: this.idName,
                height: this.height,
                autoFit: true,
            })
            this.chart.data(data)
            this.chart.scale('quantity', {
                nice: true,
            })
            this.chart.tooltip({
                showMarkers: false,
                shared: true,
            })

            this.chart
                .interval()
                .position('spu*quantity')
                .color('name')
                .adjust([
                    {
                        type: 'dodge',
                        marginRatio: 0,
                    },
                ])

            this.chart.legend({
                itemName: {
                    style: {
                        fill: '#fff',
                    },
                },
            })
            // this.chart.interaction('active-region')
            this.chart.option('scrollbar', {
                type: 'horizontal',
            })
            this.chart.interaction('element-visible-filter')
            this.chart.interaction('plot-mousewheel-scroll', {
                start: [{ trigger: 'plot:mousewheel', action: 'mousewheel-scroll:scroll', arg: { wheelDelta: 5 } }],
            })

            this.chart.render()
        },
    },
}
</script>
<style lang="less" scoped></style>
